今天想要來小小結合一下，上一次的transition及slot，
順便實作一下slot的運用，詳細的運作官網已經寫的相當清楚，不再二次說明。

新增child component並放入slot

假如我有一個about的component，我想要把內容都用slot的方式來實作。
以下有兩個重點：

1. 在component中，置入slot。
2. 多個slot的時後，只能夠有一個slot是可以不用給name

<template>
<div class="my-backgroundimage">
    <slot></slot>
    <div style="text-align:left;width:40vw;">
        <slot name="about"></slot>
    </div>
</div>
</template>

在parent component中置入child

假設我的child component的selector是aboutme

1. 第一個slot接到預設沒有name的slot
2. 第二個slot接到name=about的slot

<AboutMe>
 <h1 style="text-align:left">我是第一個slot</h1>
 <p slot="about">我是第二個slot</p>
</AboutMe>

加上一些簡單的transition

1. 幫transition定義一個fade的name
2. css中以fade當成prefix定義動畫

<transition name="fade">
  <AboutMe v-if="showAboutMe">
    <h1 style="text-align:left">我是第一個slot</h1>
    <p slot="about">我是第二個slot</p>
  </AboutMe>
</transition>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

完成